import React,{Component} from 'react'
import {Breadcrumb,PageHeader,Form,Row,Col,Input,Button,Table,Space,Tag} from 'antd'



import {
    SearchOutlined, DeleteOutlined
    , EditOutlined,TeamOutlined
} from "@ant-design/icons";

import axios from "@src/lib/axios";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";


export default class TradeList extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: true,
            value: "",
            formRef: React.createRef(),
            params: {
                company_name: "",
                page: 1,
                limit: 15,
                type: 2
            },

            list: [],

            option: "",
        };
        this.fetchData()
    }
//列表查询
    fetchData = () => {
        const {params} = this.state;
        axios.post("/platform/company/sup/list", params).then(res => {
            if (res.code === 0) {
                let data = res.data;
                this.setState({
                    list: data.list,
                    loading: false
                });
            }
        });
    }


    onValuesChange = (changedValues, allValues) => {
        console.log(changedValues, allValues);
        Object.assign(this.state.params, {...changedValues});
        this.fetchData();
    };

    //去编辑
    handleEdit = (id) => {
        axios.post('/platform/company/trade/info', id).then(res => {
            if (res.code === 0) {
                this.props.history.push({pathname:'/company/editSup', state:{id: id, info: res.data}});
            } else {
                message.warning(res.msg);
                this.fetchData();
            }
        });


    }
    //去新增
    handleAdd = () => {
        let id=0
        this.props.history.push({pathname:'/company/addTrade',state:{id}});
    }


    //完成
    onSearch = (values) => {
        console.log(values);
        Object.assign(this.state.params, values)
        this.fetchData();
    }
    //切换状态
    changeStatus = (id) => {

    }



    render(){
        let {list, loading} = this.state;
        const layout = {
            labelCol: {span: 8},
            wrapperCol: {span: 16},
        };

        const columns = [
            {title: "同业机构名称", dataIndex: "company_name", align: "center"},
            {title: "联系人", dataIndex: "contact_member", align: "center"},
            {title: "手机号", dataIndex: "mobile", align: "center"},
            {
                title: "状态", dataIndex: "is_enable", align: "center", render: (text, record) => {

                    return (
                        text === 1 ? <Tag color="#87d068">正常</Tag> : <Tag color="#f50">禁用</Tag>
                    )

                }
            },
            {title: "管理员", dataIndex: "admin", align: "center"},


            {
                title: "操作", dataIndex: "id", align: "center", render: (id, record) => {
                    let status = record.is_enable === 1 ? "禁用" : "启用";
                    let type = record.is_enable === 1 ? "danger" : "primary";
                    return (
                        <Space size={"middle"}>
                            <Button size="small" type="primary" onClick={() => this.handleEdit({id})}><EditOutlined/>修改</Button>
                            <Button size="small" type="danger"
                                    onClick={() => this.changeStatus(record.id)}><EditOutlined/>{status}</Button>
                            <Button size="small" type="primary" onClick={() => this.props.history.push({pathname:'/company/trade_user_list',state:{id:id,company_name:record.company_name}})}><TeamOutlined />查看成员</Button>
                        </Space>
                    )
                }
            }
        ]





        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">同业列表</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
                <PageHeader
                    className="site-page-header"
                    title="用户管理"
                    subTitle="同业列表"
                />

                <Form
                    rel={this.state.formRef}
                    {...layout}
                    name="basic"
                    onFinish={this.onSearch}
                    onValuesChange={this.onValuesChange}
                >

                    <Row gutter={16} style={{marginBottom: "10px"}}>
                        <Col className="gutter-row" span={5}>
                            <Form.Item
                                name={"company_name"}
                                label={"同业名称"}
                            >
                                <Input placeholder="输入同业机构名称" allowClear/>
                            </Form.Item>
                        </Col>

                        <Col className="gutter-row">
                            <Button type="primary" htmlType="submit"><SearchOutlined/>查询</Button>
                        </Col>
                    </Row>
                </Form>

                <Button
                    onClick={() => this.handleAdd()}
                    type="primary"
                    style={{
                        marginBottom: 16,
                    }}
                >
                    创建同业机构
                </Button>

                <Table
                    loading={loading}
                    size="small"
                    columns={columns}
                    rowKey="id"
                    dataSource={list}
                    pagination={true}
                />







            </div>
        )
    }
}